<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_634575_0pyw672qrys98uxr.css" />
    <link href="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/style/get.css?ver=2015010514941530" rel="stylesheet" />
    <link href="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/style/shop.css?ver=2015010514941530" rel="stylesheet" />
    <!-- 新增css -->
    <link href="./css/index.css" rel="stylesheet" type="text/css">
    <script src="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/js/common/libs/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/layui/layui.js"></script>
    <script src="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/lib/init.js?ver=2015010514941530"></script>
    <script src="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/lib/get.js?ver=2015010514941530"></script>
    <script src="http://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
</head>

<body>
    <div class="layui-fluid">
        <symbol id="move">
        </symbol>
        <div class="">
            <div class="layui-card-body" style="padding: 0px;">
                <form class="layui-form" action="Add.html" lay-filter="component-form-group">
                    <input type="hidden" name="BackUrl" />
                    <input name="ID" type="hidden" value="0" />
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md8">
                            <div class="layui-card">
                                <div class="layui-card-header">商品名称</div>
                                <div class="layui-card-body layui-row layui-col-space10">
                                    <div class="layui-col-md12">
                                        <input type="text" name="Title" placeholder="请输入商品名称" class="layui-input" />
                                    </div>
                                </div>
                                <div class="">
                                    <div class="layui-card-header">描述</div>
                                    <div class="layui-card-body layui-row layui-col-space10">
                                        <div class="layui-col-md12">
                                            <!-- 加载编辑器的容器 -->
                                            <script id="container" name="content" type="text/plain">
                                            </script>
                                            <style>
                                                #edui1 {
                                                    width: 100% !important;
                                                }
                                            </style>
                                            <!-- 配置文件 -->
                                            <script type="text/javascript" charset="UTF-8" src="js/ueditor/ueditor.config.js"></script>
                                            <!-- 编辑器源码文件 -->
                                            <script type="text/javascript" charset="UTF-8" src="js/ueditor/ueditor.all.js"></script>
                                            <!--引入样式-->
                                            <link rel="stylesheet" href="/js/ueditor/themes/default/css/ueditor.css" />
                                            <script>
                                                var ue = UE.getEditor('container')
                                                    // $(function() {
                                                    //     UE.getEditor('Content');
                                                    // })
                                            </script>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-card">
                                <div class="layui-card-header">媒体文件</div>
                                <div class="layui-card-body layui-row layui-col-space10">
                                    <div id="more_img_list" class="layui-col-space10"></div>
                                    <div class="layui-col-xs layui-col-xs4 blue-background-class">
                                        <div class="layui-upload-drag " id="test-upload-drag" style="display: flex;padding:0px;flex-direction: column;">
                                            <i class="layui-icon"></i>
                                            <p style="padding-top: 10px;">点击上传，或将文件拖拽到此处</p>
                                        </div> <input class="layui-upload-file" type="file" accept="" name="file">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-card">
                                <div class="layui-card-header">定价</div>
                                <div class="layui-card-body layui-row layui-col-space10">
                                    <div class="layui-col-md6">
                                        <div class="input_title">价格</div>
                                        <div class="input_price">
                                            <span>¥</span>
                                            <input type="text" name="title" placeholder="0.00" autocomplete="off" class="layui-input number">
                                        </div>
                                    </div>
                                    <div class="layui-col-md6">
                                        <div class="input_title">原价</div>
                                        <div class="input_price">
                                            <span>¥</span>
                                            <input type="text" name="title" placeholder="0.00" autocomplete="off" class="layui-input number">
                                        </div>
                                    </div>
                                    <div class="layui-col-md12">
                                        <input type="checkbox" name="like1[write]" lay-skin="primary" title="需要收税" checked="">
                                    </div>
                                </div>
                                <div class="layui-col-splite"></div>
                                <div class="layui-card-body layui-row layui-col-space10">
                                    <div class="layui-col-md12">
                                        <div class="input_title">成本价</div>
                                        <div class="input_price">
                                            <span>¥</span>
                                            <input type="text" name="title" placeholder="0.00" autocomplete="off" class="layui-input number">
                                        </div>
                                    </div>
                                    <div class="layui-col-md12">
                                        客户不会看到此信息
                                    </div>
                                </div>
                            </div>
                            <div class="layui-card">
                                <div class="layui-card-header">库存</div>
                                <div class="layui-card-body layui-row layui-col-space10">
                                    <div class="layui-col-md6">
                                        <div class="input_title">SKU（货号）</div>
                                        <input type="text" name="title" placeholder="" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-col-md6">
                                        <div class="input_title">条码（ISBN、UPC、GTIN 等）</div>
                                        <input type="password" name="title" placeholder="" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-col-md12">
                                        <input type="checkbox" name="like1[write]" lay-skin="primary" title="跟踪数量" checked="">
                                    </div>
                                    <div class="layui-col-md12">
                                        <input type="checkbox" name="like1[write]" lay-skin="primary" title="缺货后继续销售" checked="">
                                    </div>
                                </div>
                                <div class="layui-col-splite"></div>
                                <div class="layui-card-body layui-row layui-col-space10 ">
                                    <div class="input-title">数量</div>
                                    <div class="layui-col-md12">
                                        <div class="input_title layui-col-xs6">地点名称</div>
                                        <div class="input_title layui-col-xs6">可用</div>
                                    </div>
                                </div>
                                <div class="layui-col-splite"></div>
                                <div class="layui-card-body layui-row layui-col-space10 ">
                                    <div class="layui-col-md12 ">
                                        <div class="input_title layui-col-xs6 layui-dc ">清湖路乐安大厦窝趣社区</div>
                                        <div class="input_title layui-col-xs6">
                                            <input type="number" name="title" placeholder="" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-card">
                                <div class="layui-card-header">发货</div>
                                <div class="layui-card-body layui-row layui-col-space10">
                                    <div class="">
                                        <input type="checkbox" name="like1[write]" lay-filter="haveshopping" lay-skin="primary" title="需要运输">
                                    </div>
                                    <div class="layui-col-splite"></div>
                                    <div class="noshopping" id="noshipping">
                                        购买此产品时，客户不会输入他们的送货地址或选择送货方式。
                                    </div>
                                    <div class="hasshopping" id="haveshipping">
                                        <div class="layui-col-md6">
                                            <div class="input_title">重量</div>
                                            用于在结账时计算运费以及在订单发货过程中标记价格。
                                        </div>

                                        <div class="layui-col-md12">
                                            <div class="input_title">重量</div>
                                            <div class="layui-inline">
                                                <input type="text" name="title" placeholder="0.0" autocomplete="off" class="layui-input">
                                            </div>
                                            <div class="layui-inline">
                                                <div class="select-inner">
                                                    <select name="interest" lay-filter="aihao" class="select-item" lay-ignore>
                                                <option value="POUNDS">磅</option>
                                                <option value="OUNCES">盎司</option>
                                                <option value="KILOGRAMS">千克</option>
                                                <option value="GRAMS">克</option>
                                            </select>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                                <div class="layui-col-splite hasshopping"></div>
                                <div class="hasshopping layui-card-body layui-row layui-col-space10 ">
                                    <div class="input-title">海关信息</div>
                                    <div class="input-title">进行国际运输时，海关部门使用此信息计算关税。在打印的海关单据上显示。</div>
                                    <div class="layui-col-md12">
                                        <div class="input_title">发货国家/地区</div>
                                        <div class="input_title">
                                            <select id="PolarisSelect36" class="Polaris-Select__Input_30ock" aria-invalid="false" aria-describedby="PolarisSelect36HelpText">
												<option value="" disabled="">选择国家/地区</option>
												<option value="BT">不丹</option>
											</select>
                                        </div>
                                    </div>
                                    <div class="layui-col-md12">
                                        <div class="input_title">HS（协调制度）代码</div>
                                        <div class="input_title">
                                            <input type="text" name="title" placeholder="用户名" autocomplete="off" class="layui-input">
                                        </div>
                                        <div>手动输入超过 6 位数的数字编码。</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-card">
                                <div class="layui-card-header">选项</div>
                                <div class="layui-card-body layui-row layui-col-space10">
                                    <div class="layui-col-md12">

                                    </div>
                                </div>
                            </div>
                            <div class="layui-card">
                                <div class="layui-card-header">搜索引擎优化<span class="header-right product-seo-hide" onclick="$('#product-seo').show();$('.product-seo-hide').hide();">编辑网站搜索引擎优化</span>
                                </div>
                                <div class="layui-card-body layui-row layui-col-space10">
                                    <div class="layui-col-md12 product-seo-hide">
                                        添加产品的标题和标签描述进行搜索引擎优化。
                                    </div>
                                    <div id="product-seo" style="display:none;">
                                        <div class="layui-col-md12">
                                            <div class="input_title">页面标题</div>
                                            <input type="text" name="title" placeholder="0.00" autocomplete="off" class="layui-input ">
                                            <div class="input_remark">使用的字符长度 3/70</div>
                                        </div>
                                        <div class="layui-col-md12">
                                            <div class="input_title">元描述</div>
                                            <textarea name="" placeholder="请输入" class="layui-textarea"></textarea>

                                            <div class="input_remark">使用的字符长度 3/320</div>
                                        </div>
                                        <div class="layui-col-md12">
                                            <div class="input_title">URL handle</div>
                                            <div class="input_price" style="justify-content:start;">
                                                <span style="padding-right:0px;">http://my-ttx-shop.myshopify.com/products/</span>
                                                <input type="text" name="title" placeholder="" style="width:auto;" autocomplete="off" class="layui-input ">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-card">
                                <div class="product-state">
                                    <div class="layui-card-header">产品状态</div>
                                    <div class="layui-card-body layui-row layui-col-space10">
                                        <div class="layui-col-md12">
                                            <select name="dp" id="dp" lay-verify="required" lay-filter="xmFilter">
                                                <option value="ACTIVE">活跃</option>
                                                <option value="DRAFT">草稿</option>
                                            </select>
                                            <script>
                                            </script>
                                            <div class="product-state" id="SelectHelpText">
                                                此产品将在所有销售渠道中被隐藏。
                                                <!-- 此产品将向 5 个销售渠道提供。 -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-state">
                                    <div class="layui-card-header">销售渠道和应用</div>
                                    <div class="layui-input-inline">
                                        <!-- <input type="checkbox" class="checkboxAll" lay-skin="primary" lay-filter="allChoose" title='全选'> -->

                                    </div>
                                    <div>
                                        <input type="checkbox" lay-skin="primary" lay-filter="select_all" class="select_all" title="全部">
                                        <input type="checkbox" lay-skin="primary" lay-filter="invert" class="invert" title="反选">
                                        <input type="checkbox" name="police_id" lay-skin="primary" lay-filter="select_single" class="select_single" title="在线商店">
                                        <input type="checkbox" name="police_id" lay-skin="primary" lay-filter="select_single" class="select_single" title="Facebook">
                                        <input type="checkbox" name="police_id" lay-skin="primary" lay-filter="select_single" class="select_single" title="Google">
                                        <input type="checkbox" name="police_id" lay-skin="primary" lay-filter="select_single" class="select_single" title="POS">
                                        <input type="checkbox" name="police_id" lay-skin="primary" lay-filter="select_single" class="select_single" title="Buy Button">
                                        </input>
                                        <!---->

                                        <!-- <input type="button" id="sub" class="layui-btn" value="确认添加"> -->
                                    </div>
                                    <div class="wrap">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <input type="checkbox" id="j_cbAll" />
                                                        <span id="txt">全选</span>
                                                    </th>
                                                    <th>米粉</th>
                                                    <th>故乡</th>
                                                </tr>
                                            </thead>
                                            <tbody id="j_tb">
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" />
                                                    </td>
                                                    <td>桂林米粉</td>
                                                    <td>桂林</td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" />
                                                    </td>
                                                    <td>螺蛳粉</td>
                                                    <td>柳州</td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" />
                                                    </td>
                                                    <td>过桥米线</td>
                                                    <td>云南</td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" />
                                                    </td>
                                                    <td>南昌拌粉</td>
                                                    <td>江西</td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" />
                                                    </td>
                                                    <td>常德米粉</td>
                                                    <td>湖南常德</td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <td colspan="5"><button id="rev">反选</button></td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                    <script>
                                        //通用js代码
                                        //通过id名获取元素
                                        function getId(id) {
                                            return document.getElementById(id);
                                        }
                                        //通过父级id名获取父级下的元素
                                        function getEle(pId, tagName) {
                                            return getId(pId).document.getElementsByTagName(tagName);
                                        }
                                        //需求：1.全选功能
                                        // 2.反选功能--反向操作全选框
                                        // 3.反选按钮--列表选框取反（同时符合全选逻辑）


                                        //1.实现全选功能
                                        // 1.1获取全选按钮与span标签
                                        var cbAll = getId("j_cbAll"),
                                            txt = getId("txt"),
                                            cks = getEle("j_tb", "input");
                                        cbAll.onclick = function() {
                                            for (var i = 0; i < cks.length; i++) {
                                                cks[i].checked = this.checked;
                                            }
                                            txt.innerText = this.checked ? "全不选" : "全选";
                                        }

                                        // 2反选功能实现
                                        // 2.1循环遍历checkbox复选框
                                        for (var i = 0; i < cks.length; i++) {
                                            cks[i].onclick = getOption;
                                        }

                                        // 3.反选按钮--列表选框取反（同时符合全选逻辑）
                                        getId("rev").onclick = function() {
                                            for (var i = 0; i < cks.length; i++) {
                                                cks[i].checked = !cks[i].checked;
                                            }
                                            getOption();
                                        }

                                        // 封装一个函数
                                        function getOption() {
                                            var flag = true; //默认情况下，全选按钮为全选中状态（不是直接显示在页面上的默认状态）
                                            // 循环遍历每一个列表前的复选框状态
                                            for (var j = 0; j < cks.length; j++) {
                                                // 只要有一个没有被选中的话全选框就不被选中，故找到一个没有被选中的复选框就不再查询
                                                if (!cks[j].checked) {
                                                    flag = false;
                                                    break;
                                                }
                                            }
                                            cbAll.checked = flag;
                                            txt.innerText = cbAll.checked ? "全不选" : "全选";
                                        }



                                        layui.use(['form', 'jquery'], function() {
                                            var form = layui.form;
                                            var $ = layui.jquery;
                                            //全选
                                            form.on('checkbox(select_all)', function(data) {
                                                var a = data.elem.checked;
                                                var parent = data.elem.parentNode;
                                                if (a == true) {
                                                    $(parent).children(".select_single").prop("checked", true);
                                                    form.render('checkbox');
                                                } else {
                                                    $(parent).children(".select_single").prop("checked", false);
                                                    form.render('checkbox');
                                                }

                                            });
                                            //反选
                                            form.on('checkbox(invert)', function(data) {
                                                var parent = data.elem.parentNode;
                                                var item = $(parent).children(".select_single");
                                                item.each(function() {
                                                    if ($(this).prop("checked")) {
                                                        $(this).prop("checked", false);
                                                    } else {
                                                        $(this).prop("checked", true);
                                                    }
                                                })
                                                form.render('checkbox');


                                            });
                                            //有一个未选中全选取消选中
                                            form.on('checkbox(select_single)', function(data) {
                                                var parent = data.elem.parentNode;
                                                var item = $(parent).children(".select_single");
                                                for (var i = 0; i < item.length; i++) {
                                                    if (item[i].checked == false) {
                                                        $(parent).children(".select_all").prop("checked", false);
                                                        form.render('checkbox');
                                                        break;
                                                    }
                                                }
                                                //如果都勾选了  勾上全选
                                                var all = item.length;
                                                for (var i = 0; i < item.length; i++) {
                                                    if (item[i].checked == true) {
                                                        all--;
                                                    }
                                                }
                                                if (all == 0) {
                                                    $(parent).children(".select_all").prop("checked", true);
                                                    form.render('checkbox');
                                                }
                                            });
                                        });


                                        // layui.use(['layer', 'form'], function() {
                                        //     var form = layui.form,
                                        //         layer = layui.layer;

                                        //     form.on('checkbox(allChoose)', function(data) {
                                        //         $("input[name='check[]']").each(function() {
                                        //             this.checked = data.elem.checked;
                                        //             console.log(data);
                                        //         });
                                        //         form.render('checkbox');
                                        //     });

                                        // });

                                        // $('#sub').click(function() {
                                        //     var items = [];
                                        //     $("input[name='check[]']:checked").each(
                                        //         function() {
                                        //             items.push($(this).val());
                                        //         })
                                        //     console.log(items);
                                        // })
                                    </script>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item layui-layout-admin">
                            <div class="layui-input-block">
                                <div class="layui-footer" style="left: 0;">
                                    <button class="layui-btn" lay-submit="" lay-filter="component-form">确定</button>
                                </div>
                            </div>
                        </div>
                </form>
                </div>
            </div>

        </div>
</body>

<!-- 新增js -->
<script src="./js/index.js"></script>


</html>